<template>
  <div ref="mainCon" class="container">
    <div class="reminder" v-if="hasRule">
      <i class="el-icon-warning"></i>
      公司尚未设置打卡规则，企业人员暂时无法正常打卡。
      <el-link type="primary" @click="setPunchCardRule" v-show="isShowAdd"
        >打卡规则设置</el-link
      >
    </div>
    <topTitle
      v-if="!hiddleToolBar"
      :titleText="titleText"
      :titleExplain="titleExplain"
      :pathUrl="pathUrl"
      :btnText="btnText"
      :isShowBtn="isShowBtn"
      :oldUrl="oldUrl"
    ></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="时间" class="row-padding-bottom">
              <el-date-picker
                v-model="time"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="部门" class="row-padding-bottom">
              <el-cascader
                v-model="orgId"
                :options="orglist"
                :props="{ checkStrictly: true }"
                @change="handleChange"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="姓名" class="row-padding-bottom name">
                <el-input
                  placeholder="请输入内容"
                  clearable
                  v-model="filterField.name"
                  @blur="filterField.name = changeValue($event)"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-form-item>
                            <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchList" class="commonBtn"></el-button>
                        </el-form-item> -->
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
              <el-button
                class="commonBut saveBtn funComBut"
                icon="icon iconfont icondaochu"
                @click="exportExcel"
                v-show="exportBtn"
                ><span class="opetareText">导出报表</span></el-button
              >
            </el-form-item>
          </el-col>
          <!-- <el-form-item class="fr">
                            <el-button type="primary" icon="icon iconfont icondaochu" @click="exportExcel"  class="commonBtn saveBtn">导出报表</el-button>
                        </el-form-item> -->
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          @sort-change="sortChange"
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="name"
            label="姓名"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="idcard"
            label="身份证"
            align="center"
            width="175px"
          ></el-table-column>
          <el-table-column prop="orgName" label="部门" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.orgName"
                :columnName="'orgName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column prop="employeeType" label="职位" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.employeeType"
                :columnName="'employeeType'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="attDays"
            label="打卡天数"
            sortable="custom"
            align="center"
            min-width="120"
          >
            <template slot-scope="scope"> {{ scope.row.attDays }}天 </template>
          </el-table-column>
          <el-table-column
            label="打卡次数"
            prop="attNum"
            min-width="120"
            sortable="custom"
            align="center"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="showAttendanceDetail(scope.row)"
                >{{ scope.row.attNum }}次</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
    </div>

    <!-- 右侧弹窗 -->
    <el-drawer
      custom-class="brand-dialog-min-width"
      title="考勤详情"
      :visible.sync="showDrawer"
      direction="rtl"
      size="900px"
    >
      <el-col :span="24">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-form-item label="状态" class="row-padding-bottom">
            <el-select
              v-model="drawerfilterField.inRange"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in attendanceState"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <!-- <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchBrand" class="commonBtn"></el-button> -->
            <!-- <el-button type="primary" icon="el-icon-search" @click="searchBrand">查询</el-button> -->
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchBrand"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
        </el-form>
        <div class="tableBox" style="padding-top: 0">
          <!-- <div class="tableTitle">
                    <span>查询表格</span>
                </div> -->
          <el-table
            :data="drawerTableList"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            style="border: 1px solid #dfe6ec"
            v-loading="isLoading"
          >
            <el-table-column
              property="name"
              label="姓名"
              align="center"
              width="80"
            ></el-table-column>
            <el-table-column
              property="punchTime"
              label="打卡时间"
              width="105"
              align="center"
            ></el-table-column>
            <el-table-column property="address" label="打卡地址" width="160">
              <template slot-scope="scope">
                <span v-if="(scope.row.address + '').length < 13">
                  {{ scope.row.address ? scope.row.address : '--' }}
                </span>
                <el-popover
                  v-else
                  placement="right"
                  title=""
                  width="200"
                  trigger="hover"
                  :content="scope.row.address"
                >
                  <span class="addressBox" slot="reference">
                    {{ scope.row.address ? scope.row.address : '--' }}
                  </span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              property="path"
              label="打卡图片"
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <el-image
                  style="width: 50px; height: 50px"
                  :src="scope.row.path"
                  :preview-src-list="scope.row.list"
                >
                </el-image>
              </template>
            </el-table-column>
            <el-table-column
              property="inRange"
              label="状态"
              width="80"
              align="center"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.inRange == 1" class="successColor"
                  >范围内</span
                >
                <span v-else class="errorColor">范围外</span>
              </template>
              <!-- 1 内: 0 -->
            </el-table-column>
            <el-table-column property="remark" label="备注" width="160">
              <template slot-scope="scope">
                <span class="addressBox">{{
                  scope.row.remark ? scope.row.remark : '--'
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              property="attType"
              label="打卡方式"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.attType == 0">APP</span>
                <span v-else>考勤机</span>
              </template>
            </el-table-column>
            <!-- attType  0 APP -->
          </el-table>
          <div style="padding: 10px 0">
            <Pagination
              ref="drawerPagination"
              @getList="getDrawerTableList"
              :filterField="drawerfilterField"
              :requestUrl="drawerRequestUrl"
            ></Pagination>
          </div>
        </div>
      </el-col>
    </el-drawer>
  </div>
</template>
<script>
import common from '../../kits/common'
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'qyAttendance',
  mixins: [scrollTable],
  data() {
    return {
      isShowAdd: '',
      isShowBtn: false, //考勤规则按钮
      exportBtn: false, //导出报表按钮
      titleText: '企业考勤',
      advanced: false,
      titleExplain:
        '企业人员可以在手机APP上打卡，支持设置考勤地点和打卡范围，支持查看考勤统计',
      pathUrl: '/home/attendance/punchCardRuleList',
      oldUrl: '/home/attendance/qyAttendance',
      btnText: '考勤规则设置',
      //下拉框数据

      //表格数据
      tableList: [],
      requestUrl: 'api-att/nc/attendance/expand/attlist',
      time: [],
      orgId: '',
      //搜索条件
      filterField: {
        startDate: '',
        endDate: '',
        orgId: '',
        name: '',
      },
      //是否显示弹窗
      showDrawer: false,
      //弹窗数据
      drawerTableList: [],
      list: [],
      // value1:"",
      // value: [],
      orglist: [],
      // 弹窗搜素条件
      drawerfilterField: {
        inRange: '',
        employeeId: '',
        name: '',
        startDate: '',
        endDate: '',
      },
      attendanceState: [
        {
          value: '1',
          label: '范围内',
        },
        {
          value: '0',
          label: '范围外',
        },
      ],
      drawerRequestUrl: 'api-att/nc/attendance/expand/attdetail',
      // 是否有打卡规则
      hasRule: false,
      isShow: false,
      loading: true, //考勤loading
      isLoading: true, //考勤详情loading
      tableHeightCur: window.innerHeight - 200,
      // oldPicList:[],
    }
  },
  created() {
    this.$store.state.activeMenu = '/home/attendance/qyAttendance'
    //企业首页考勤查询传参 By JY
    this.filterField.name = this.$route.query.name
    var now = new Date()
    var year = now.getFullYear()
    var month = now.getMonth() + 1
    var date = now.getDate()
    var endTime = year + '-' + month + '-' + date
    var startTime = year + '-' + month + '-' + '1'
    this.time = [startTime, endTime]
    this.filterField.startDate = startTime
    this.filterField.endDate = endTime
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.getOrglist()
    this.getHasRule()
    // 判断按钮权限
    //考勤规则设置
    this.isShowAdd = this.$store.state.buttonLimitsArr.indexOf('qyAtt:add') > -1
    this.isShowBtn = this.$store.state.buttonLimitsArr.indexOf('qyAtt:add') > -1
    //导出报表
    this.exportBtn =
      this.$store.state.buttonLimitsArr.indexOf('qyAtt:export') > -1
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    //考勤次数
    showAttendanceDetail(row) {
      this.drawerfilterField.employeeId = row.employeeId
      this.drawerfilterField.name = row.name
      this.drawerfilterField.startDate = this.filterField.startDate
      this.drawerfilterField.endDate = this.filterField.endDate
      this.showDrawer = true
      this.$nextTick(function () {
        this.$refs.drawerPagination.getTableListData()
        // this.$refs.pagination.getTableListData();
      })
    },
    getDrawerTableList(data) {
      this.drawerTableList = data
      this.list = []
      this.isLoading = false
      for (var i = 0; i < this.drawerTableList.length; i++) {
        this.list.push(this.drawerTableList[i].path)
      }

      // this.oldPicList = this.list;
      for (var i = 0; i < this.drawerTableList.length; i++) {
        // this.list.push(this.drawerTableList[i].path)
        var container = this.list

        var frontArr = container.slice(0, i)
        var behindArr = container.slice(i, this.drawerTableList.length)
        var list = behindArr.concat(frontArr)
        this.drawerTableList[i].list = list
      }
    },

    // 搜索
    searchList() {
      if (!this.time || this.time == '' || this.time == null) {
        this.$message({
          message: '请选择起止日期',
          type: 'warning',
        })
        return
      }

      this.filterField.startDate = this.time[0]
      this.filterField.endDate = this.time[1]

      this.$refs.pagination.getTableListData()
    },
    show() {
      this.$preview.open(1, this.previewlist)
    },
    handleChange(item) {
      var orgId = this.orgId[this.orgId.length - 1]

      this.filterField.orgId = orgId
    },
    searchBrand() {
      this.$refs.drawerPagination.getTableListData()
    },
    setPunchCardRule() {
      this.$router.push('/home/attendance/punchCardRuleList')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/attendance/qyAttendance',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    exportExcel() {
      // if(this.tableList.length>0){
      window.location.href =
        common.commonApi +
        'api-att/nc/attendance/expand/export?startDate=' +
        this.time[0] +
        '&endDate=' +
        this.time[1] +
        '&sortField=' +
        this.filterField.sortField +
        '&sort=' +
        this.filterField.sort +
        '&orgId=' +
        this.filterField.orgId +
        '&name=' +
        this.filterField.name +
        '&access_token=' +
        localStorage.getItem('access_token')
      // }else{
      //   this.$message({
      //       type: "error",
      //       message: "无数据导出"
      //   });
      // }
    },
    getOrglist() {
      this.axios({
        method: 'post',
        url: 'api-att/nc/attendance/expand/orgarc',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.orglist = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getHasRule() {
      this.axios({
        method: 'post',
        url: 'api-att/nc/attrule/expand/attrulelist',
        data: {
          pageNo: 1,
          pageSize: 1,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.hasRule = response.data.result.total > 0 ? false : true
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  min-height: calc(100% - 106px);
  @media screen and (min-width: 1280px) and (max-width: 1366px) {
    .searchInputWidth /deep/.el-form-item__label {
      width: 40px;
    }
  }
}

.top {
  top: 243px;
  .mainCon {
    top: 243px;
  }
  /deep/ .topCon {
    margin-top: 0;
  }
}

.commomPadding {
  padding-top: 0;
  /deep/ .imgPrev {
    width: 50px;
  }
}

// 页面提示
.reminder {
  color: #666;
  font-size: 14px;
  // border: 1px solid #ffaa00;
  background: #fffbe6;
  border-radius: 3px;
  padding: 5px 10px;
  // margin: 24px;
  margin-bottom: 0;
  i {
    color: #ffaa00;
  }
  .el-link {
    vertical-align: baseline;
  }
}

//  @media screen and (max-width:1440px){
// 	.el-date-editor--daterange.el-input__inner{
//     width: 310px;
//   }
// }

// @media all and (min-width: 1360px) and (max-width: 1470px) {
//     .el-date-editor--daterange.el-input__inner {
//         width: 300px;
//     }
//     .name /deep/ .el-input__inner {
//         width: 160px;
//     }
// }

.saveBtn /deep/ .iconfont {
  // padding: 0 5px;
  font-size: 14px;
}

.addressBox {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@import '../../../static/css/filterArea.less';
</style>
